<!-- 此组件用于搜索页面展示列表 -->
<template>
	<view class="container">
		<view class="tag-list">
			<view class="tag" v-for="(tag,index) in tagList">
				<view class="delete-tag">
					<u-icon name="close" class="u-icon" size="12" color="#ffffff" @click="deleteTag(tag,index)"></u-icon>
				</view>
				<view class="tag-name" @click="selectItem(tag)">{{tag.value}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"tag-list",
		props:{
			tagList:{
				type:Array,
				default:[]
			}
		},
		data() {
			return {
				
			};
		},
		methods:{
			deleteTag(val,index){
				let data = {
					item:val,
					index:index
				}
				this.$emit('delete',data)
			},
			selectItem(val){
				this.$emit('select',val)
			}
		}
	}
</script>

<style scoped lang="scss">
.container{
	width: 100%;
	padding: 10rpx 20rpx;
	.tag-list{
		display: flex;
		flex-wrap: wrap;
		font-size: 20rpx;
		justify-content: flex-start;
		.tag{
			margin-right: 10rpx;
			color: black;
			// border: 1px solid black;
			.delete-tag{
				position: relative;
				left: 0;
				top: 15rpx;
				.u-icon{
					background-color: black;
					border: 1px solid black;
					width: 30rpx;
					border-radius: 20rpx;
				}
			}
			.tag-name{
				padding: 10upx 20upx;
				border-radius: 10rpx;
				margin-right: 30rpx;
				background-color: #f3f3f3;
			}
		}
	}
}
</style>